<template>
  <div id="identiy">
    <!-- 认证页 -->
    <div class="identiy-inner">
      <!-- 注册 ： 法人授权书 -->
      <div class="certificate-upload">
        <h4>手持身份证合照</h4>
        <div class="control-block">
          <img
            v-if="imageList['reader1'] != '' "
            :src="imageList['reader1']"
            alt="i业主"
            preview="1"
            preview-text
          />
          <div class="image-reader-add">
            <md-image-reader
              name="reader1"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传手持身份证合照</p>
          </div>
        </div>
      </div>
      <!-- 注册 ：上传身份证 -->
      <div class="certificate-upload">
        <h4>身份证</h4>
        <div class="control-block">
          <div class="image-card-add">
            <div class="pre-view" v-if="imageList['reader2'] != ''">
              <img :src="imageList['reader2']" alt />
            </div>
            <md-image-reader
              name="reader2"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传身份证信息面</p>
          </div>
        </div>
      </div>
      <!-- 注册 ：身份信息 -->
      <div class="identity-input">
        <md-field>
          <md-input-item v-model="name" title="姓名" placeholder="请输入真实姓名" align="right"></md-input-item>
          <md-input-item
            v-model="number"
            title="身份证号"
            placeholder="请输入身份证号"
            maxlength="18"
            align="right"
          ></md-input-item>
        </md-field>
      </div>
      <!-- 按钮区 -->
      <div class="button-block">
        <button @click="next">上传认证</button>
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩
import {
  NoticeBar,
  Dialog,
  Icon,
  ImageReader,
  Tag,
  Toast,
  Button,
  InputItem,
  Field,
  FieldItem,
  DetailItem
} from "mand-mobile";

export default {
  components: {
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Dialog.name]: Dialog,
    [DetailItem.name]: DetailItem
  },
  name: "identiy",
  data() {
    return {
      mobile: "", //电话
      imageList: {
        reader1: "/static/images/register/get-card.png",
        reader2: ""
      },
      number: "", //身份证号
      name: "", //姓名
      id_images: "", //手持身份证照片url
      images: "", //身份证照片url

    };
  },
  methods: {
    //  上传图片
    onReaderSelect() {
      Toast.loading("上传中...");
    },
    // 设置图片
    onReaderComplete(name, { dataUrl }) {
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        this.imageList[name] = dataUrl;
        if (name == "reader1") {
          let _this = this;
          let callBack = function(res) {
            if (res.data.code == 1) {
              _this.id_images = res.data.data.url;
              Toast.hide();
              Toast.succeed("添加成功", 2500);
            } else {
              Toast.hide();
              Toast.failed("图片上传失败,请重试");
            }
          };
          this.saveBase64Image(dataUrl, callBack);
        } else if (name == "reader2") {
          // 身份证信息页
          let params = {
            image: dataUrl,
            side: "front" //信息页
          };
          https
            .fetchPost(config.putIdCard, params)
            .then(res => {
              Toast.hide();
              console.log(res.data);
              if (res.data.code == 1) {
                if (res.data.data.image_status == "normal") {
                  let data = res.data.data.words_result;
                  this.name = data["姓名"].words;
                  this.number = data["公民身份号码"].words;
                  let _this = this;
                  let callBack = function(res) {
                    if (res.data.code == 1) {
                      _this.images = res.data.data.url;
                      Toast.hide();
                      Toast.succeed("添加成功", 2500);
                    } else {
                      Toast.hide();
                      Toast.failed("图片上传失败,请重试");
                    }
                  };
                  this.saveBase64Image(dataUrl, callBack);
                } else {
                  Toast.failed("图片识别失败,请手填或重新识别");
                }
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        }
        this.$previewRefresh();
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    // 下一步
    next() {
      if (this.id_images == "") {
        Toast.info("请上传手持身份证合照", 2000);
        return;
      }
      if (this.images == "") {
        Toast.info("请上传身份证照", 2000);
        return;
      }
      if (this.name == "") {
        Toast.info("请填写身份证姓名", 2000);
        return;
      }
      if (this.number == "") {
        Toast.info("请填写有效的身份证号码", 2000);
        return;
      }
      
      let qid = this.$store.state.residentialType.qid;
      let mobile = this.mobile;
      let number = this.number;
      let name = this.name;
      let images = this.images;
      let id_images = this.id_images;

      let params = {
        qid,
        mobile,
        number,
        name,
        images,
        id_images
      };
      https
        .fetchPost(config.temporarySign, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.succeed("认证成功");
            setTimeout(() => {
              this.$router.replace({
                path: "/localeChanQuan",
                query: { number: number }
              });
            }, 1500);
          } else {
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 64图转url
    saveBase64Image(dataUrl, callBack) {
      let params = {
        image: dataUrl
      };
      https
        .fetchPost(config.base64Image, params)
        .then(res => {
          callBack(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.mobile = this.$route.query.mobile;
  },
  mounted() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
button {
  z-index: 1;
}
.md-field-item {
  z-index: 1;
}
.pre-view {
  z-index: 1;
}
#identiy {
  .identiy-inner {
    height: 100vh;
  }
  // background: #fff;
  .tip {
    background: #fff;
    z-index: 0;
    padding: 20px 0 0;
    p {
      font-size: 24px;
    }
  }
  .certificate-upload {
    background: #fff;
    h4 {
      padding-left: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .control-block {
      display: flex;
      justify-content: center;
      .image-reader-add,
      .image-card-add {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 4px 1px #eee;
        border-radius: 14px;
        height: 320px;
        width: 280px;
        margin: 10px 15px;
        background: #fff;
        .pre-view {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 9;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .md-image-reader {
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
        }
        p {
          margin-top: 20px;
          font-size: 24px;
          color: #666;
        }
      }
      img {
        height: 320px;
        width: 280px;
      }
      .image-card-add {
        width: 300px;
        height: 180px;
        img {
          width: 300px;
          height: 180px;
        }
      }
    }
  }
  .button-block {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    button {
      border: none;
      width: 500px;
      height: 90px;
      // background: #555;
      background: #2f86f6;
      color: #fff;
      font-size: 32px;
      border-radius: 40px;
      outline: none;
    }
  }
  .save-block {
    background: #fff;
    padding-top: 120px;
    padding-bottom: 200px;
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
  .personal-bank {
    padding: 30px 30px 0;
    h2 {
      font-size: 28px;
      color: #333;
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .add-bank {
      box-shadow: 0 0 6px 1px #e1e1e1;
      border-radius: 20px;
      padding: 20px 0 8px;
      margin-top: 28px;
      p {
        font-size: 26px;
        color: #999;
        text-align: center;
      }
      .link-btn {
        margin-top: 40px;
        padding: 0 80px;
      }
      .bank-number-btn {
        position: relative;
      }
    }
    h3 {
      font-size: 28px;
      color: #666;
      margin: 40px 0;
      strong {
        font-size: 30px;
        font-weight: 600;
        color: $themeGold;
      }
    }
    ul {
      padding-top: 40px;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 6px 1px #e1e1e1;
        border-radius: 20px;
        padding: 20px 25px;
        margin-bottom: 30px;
        font-size: 26px;
        color: #666;
        .del-btn {
          display: flex;
          width: 60px;
          height: 100%;
          justify-content: center;
          color: $themeGold;
        }
      }
    }
  }
  .register-btn {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
}
</style>
